﻿@model NewsCommentListModel
@{
    var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
    var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;

    int? filterByNewsItemId = ViewBag.FilterByNewsItemId;

    //page title
    ViewBag.Title = T("Admin.ContentManagement.News.Comments").Text;
    //active menu item (system name)
    Html.SetActiveMenuItemSystemName("News comments");
}

@Html.AntiForgeryToken()
<div class="content-header clearfix">
    <h1 class="pull-left">
        @T("Admin.ContentManagement.News.Comments")
    </h1>
    <div class="pull-right">
        <button type="button" id="approve-selected" class="btn bg-green">
            <i class="fa fa-check-square-o"></i>
            @T("Admin.ContentManagement.News.Comments.ApproveSelected")
        </button>
        <button type="button" id="disapprove-selected" class="btn bg-navy">
            <i class="fa fa-minus-square-o"></i>
            @T("Admin.ContentManagement.News.Comments.DisapproveSelected")
        </button>
        <button type="button" id="delete-selected" class="btn bg-red">
            <i class="fa fa-trash-o"></i>
            @T("Admin.ContentManagement.News.Comments.DeleteSelected")
        </button>
    </div>
</div>

<div class="content">
    <div class="form-horizontal">
        <div class="panel-group">
            <div class="panel panel-default panel-search">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-4">
                                    @Html.NopLabelFor(model => model.CreatedOnFrom)
                                </div>
                                <div class="col-md-8">
                                    @Html.NopEditorFor(model => model.CreatedOnFrom)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-4">
                                    @Html.NopLabelFor(model => model.CreatedOnTo)
                                </div>
                                <div class="col-md-8">
                                    @Html.NopEditorFor(model => model.CreatedOnTo)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-4">
                                    @Html.NopLabelFor(model => model.SearchApprovedId)
                                </div>
                                <div class="col-md-8">
                                    @Html.NopDropDownList("SearchApprovedId", Model.AvailableApprovedOptions)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-4">
                                    @Html.NopLabelFor(model => model.SearchText)
                                </div>
                                <div class="col-md-8">
                                    @Html.NopEditorFor(model => model.SearchText)
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-4">
                                    <button type="button" id="search-comments" class="btn btn-primary btn-search">
                                        <i class="fa fa-search"></i>
                                        @T("Admin.Common.Search")
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="comments-grid"></div>

                    <script>
                        $(document).ready(function() {
                            $("#comments-grid").kendoGrid({
                                dataSource: {
                                    type: "json",
                                    transport: {
                                        read: {
                                            url: "@Url.Action("Comments", "News", new { filterByNewsItemId = filterByNewsItemId.HasValue ? filterByNewsItemId : null })",
                                            type: "POST",
                                            dataType: "json",
                                            data: additionalData
                                        },
                                        update: {
                                            url: "@Html.Raw(Url.Action("CommentUpdate", "News"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        },
                                        destroy: {
                                            url: "@Html.Raw(Url.Action("CommentDelete", "News"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        }
                                    },
                                    schema: {
                                        data: "Data",
                                        total: "Total",
                                        errors: "Errors",
                                        model: {
                                            id: "Id",
                                            fields: {
                                                Id: { editable: false, type: "number" },
                                                NewsItemTitle: { editable: false, type: "string" },
                                                StoreName: { editable: false, type: "string" },
                                                StoreId: { editable: false, type: "number" },
                                                CustomerInfo: { editable: false, type: "string" },
                                                CustomerId: { editable: false, type: "number" },
                                                CommentTitle: { editable: false, type: "string" },
                                                CommentText: { editable: false, type: "string" },                                                
                                                IsApproved: { editable: true, type: "boolean" },
                                                CreatedOn: { editable: false, type: "date" }
                                            }
                                        }
                                    },
                                    requestEnd: function(e) {
                                        if (e.type == "update") {
                                            this.read();
                                        }
                                    },
                                    error: function(e) {
                                        display_kendoui_grid_error(e);
                                        // Cancel the changes
                                        this.cancelChanges();
                                    },
                                    pageSize: @(defaultGridPageSize),
                                    serverPaging: true,
                                    serverFiltering: true,
                                    serverSorting: true
                                },
                                pageable: {
                                    refresh: true,
                                    pageSizes: [@(gridPageSizes)],
                                    @Html.Partial("_GridPagerMessages")
                                },
                                editable: {
                                    confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                    mode: "inline"
                                },
                                scrollable: false,
                                dataBound: onDataBound,
                                columns: [
                                    {
                                        field: "Id",
                                        headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
                                        headerAttributes: { style: "text-align:center" },
                                        attributes: { style: "text-align:center" },
                                        template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
                                        width: 50
                                    }, {
                                        field: "NewsItemTitle",
                                        title: "@T("Admin.ContentManagement.News.Comments.Fields.NewsItem")",
                                        width: 200,
                                        template: '<a href="@Url.Content("~/Admin/News/Edit/")#=NewsItemId#">#:NewsItemTitle#</a>'
                                    }, {
                                        field: "StoreId",
                                        title: "@T("Admin.ContentManagement.News.Comments.Fields.StoreName")",
                                        width: 150,
                                        template: "#:StoreName#"
                                    }, {
                                        field: "CustomerId",
                                        title: "@T("Admin.ContentManagement.News.Comments.Fields.Customer")",
                                        width: 150,
                                        template: '<a href="@Url.Content("~/Admin/Customer/Edit/")#=CustomerId#">#:CustomerInfo#</a>'
                                    }, {
                                        field: "CommentTitle",
                                        title: "@T("Admin.ContentManagement.News.Comments.Fields.CommentTitle")"
                                    }, {
                                        field: "CommentText",
                                        title: "@T("Admin.ContentManagement.News.Comments.Fields.CommentText")",
                                        encoded: false
                                    }, {
                                        field: "IsApproved",
                                        title: "@T("Admin.ContentManagement.News.Comments.Fields.IsApproved")",
                                        width: 100,
                                        headerAttributes: { style: "text-align:center" },
                                        attributes: { style: "text-align:center" },
                                        template: '# if(IsApproved) {# <i class="fa fa-check true-icon"></i> #} else {# <i class="fa fa-close false-icon"></i> #} #'
                                    }, {
                                        field: "CreatedOn",
                                        title: "@T("Admin.ContentManagement.News.Comments.Fields.CreatedOn")",
                                        width: 100,
                                        type: "date",
                                        format: "{0:G}"
                                    }, {
                                        command: [
                                            {
                                                name: "edit",
                                                text: {
                                                    edit: "@T("Admin.Common.Edit")",
                                                    update: "@T("Admin.Common.Update")",
                                                    cancel: "@T("Admin.Common.Cancel")"
                                                }
                                            }, {
                                                name: "destroy",
                                                text: "@T("Admin.Common.Delete")"
                                            }
                                        ],
                                        width: 200
                                    }
                                ]
                            });
                        });
                    </script>

                    <script type="text/javascript">
                        var selectedIds = [];

                        $(document).ready(function() {
                            //search button
                            $('#search-comments')
                                .click(function() {
                                    //search
                                    var grid = $('#comments-grid').data('kendoGrid');
                                    grid.dataSource.page(1); //new search. Set page size to 1
                                    //grid.dataSource.read(); we already loaded the grid above using "page" function
                                    //clear selected checkboxes
                                    $('.checkboxGroups').attr('checked', false).change();
                                    selectedIds = [];
                                    return false;
                                });

                            //"delete selected" button
                            $('#delete-selected').click(function(e) {
                                e.preventDefault();

                                var postData = {
                                    selectedIds: selectedIds
                                };
                                addAntiForgeryToken(postData);

                                $.ajax({
                                    cache: false,
                                    type: "POST",
                                    url: "@(Url.Action("DeleteSelectedComments", "News"))",
                                    data: postData,
                                    complete: function(data) {
                                        //reload grid
                                        var grid = $('#comments-grid').data('kendoGrid');
                                        grid.dataSource.read();
                                    },
                                    error: function(xhr, ajaxOptions, thrownError) {
                                        alert(thrownError);
                                    },
                                    traditional: true
                                });
                                return false;
                            });
                            
                            //"approve selected" button
                            $('#approve-selected')
                                .click(function(e) {
                                    e.preventDefault();

                                    var postData = {
                                        selectedIds: selectedIds
                                    };
                                    addAntiForgeryToken(postData);

                                    $.ajax({
                                        cache: false,
                                        type: "POST",
                                        url: "@(Url.Action("ApproveSelected", "News"))",
                                        data: postData,
                                        complete: function(data) {
                                            //reload grid
                                            var grid = $('#comments-grid').data('kendoGrid');
                                            grid.dataSource.read();
                                        },
                                        error: function(xhr, ajaxOptions, thrownError) {
                                            alert(thrownError);
                                        },
                                        traditional: true
                                    });
                                    return false;
                                });

                            //"disapprove selected" button
                            $('#disapprove-selected')
                                .click(function(e) {
                                    e.preventDefault();

                                    var postData = {
                                        selectedIds: selectedIds
                                    };
                                    addAntiForgeryToken(postData);

                                    $.ajax({
                                        cache: false,
                                        type: "POST",
                                        url: "@(Url.Action("DisapproveSelected", "News"))",
                                        data: postData,
                                        complete: function(data) {
                                            //reload grid
                                            var grid = $('#comments-grid').data('kendoGrid');
                                            grid.dataSource.read();
                                        },
                                        error: function(xhr, ajaxOptions, thrownError) {
                                            alert(thrownError);
                                        },
                                        traditional: true
                                    });
                                    return false;
                                });
                            
                            $('#mastercheckbox').click(function() {
                                $('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
                            });

                            //wire up checkboxes.
                            $('#comments-grid').on('change', 'input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]', function(e) {
                                var $check = $(this);
                                if ($check.is(":checked") == true) {
                                    var checked = jQuery.inArray($check.val(), selectedIds);
                                    if (checked == -1) {
                                        //add id to selectedIds.
                                        selectedIds.push($check.val());
                                    }
                                } else {
                                    var checked = jQuery.inArray($check.val(), selectedIds);
                                    if (checked > -1) {
                                        //remove id from selectedIds.
                                        selectedIds = $.grep(selectedIds, function(item, index) {
                                            return item != $check.val();
                                        });
                                    }
                                }
                                updateMasterCheckbox();
                            });
                        });

                        function onDataBound(e) {
                            $('#comments-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]').each(function() {
                                var currentId = $(this).val();
                                var checked = jQuery.inArray(currentId, selectedIds);
                                //set checked based on if current checkbox's value is in selectedIds.
                                $(this).attr('checked', checked > -1);
                            });

                            updateMasterCheckbox();
                        }

                        function updateMasterCheckbox() {
                            var numChkBoxes = $('#comments-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]').length;
                            var numChkBoxesChecked = $('#comments-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]:checked').length;
                            $('#mastercheckbox').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
                        }

                        function additionalData() {
                            var data = {
                                CreatedOnFrom: $('#@Html.FieldIdFor(model => model.CreatedOnFrom)').val(),
                                CreatedOnTo: $('#@Html.FieldIdFor(model => model.CreatedOnTo)').val(),
                                SearchText: $('#@Html.FieldIdFor(model => model.SearchText)').val(),
                                SearchApprovedId: $('#SearchApprovedId').val()
                            };
                            addAntiForgeryToken(data);
                            return data;
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>